<template>
  <view class="zgjm-wrapper" v-if="isShowMsg == 'Y'">
    <view class="top">
      <tui-input label="梦境" placeholder="请输入梦境" trim v-model="title_zhougong">
        <template v-slot:right>
          <tui-form-button height="30px" width="80px" background="#c09351" @click="handerBtn">解梦</tui-form-button>
        </template>
      </tui-input>
    </view>
    <image
      class="my-bg"
      src="https://ai-sbbs.xyz/api/profile/upload/2024/07/01/216ecf4ef90549a1b0d6b8cd648786f9.png"
      mode="scaleToFill"
    />

    <view class="center" v-if="card.title">
      <tui-tab
        isSticky
        field="title"
        scroll
        :tabs="dataList"
        :size="30"
        bold
        color="#999"
        selectedColor="#c09351"
        sliderBgColor="#c09351"
        @change="change"
      ></tui-tab>
    </view>

    <view class="bottom" v-if="dataList.length">
      <scroll-view scroll-y>
        <tui-card full class="tul-card">
          <template v-slot:body>
            <view class="tui-default">{{card.message}}</view>
          </template>
        </tui-card>
      </scroll-view>
    </view>

    <tui-toast ref="toast"></tui-toast>
  </view>
</template>

<script>
import { yfgjiemengApi } from "@/apis/qiuqian";
import showPage from '@/utils/showPage'

export default {
  mixins: [showPage],

  data() {
    return {
      title_zhougong: "",
      dataList: [],
      card: {}
    };
  },
  methods: {
    async handerBtn() {
      if (this.title_zhougong) {
        let { code, data, msg } = await yfgjiemengApi({
          title_zhougong: this.title_zhougong
        });
        if (code == 1) {
          this.dataList = data;
          if (data.length) {
            this.card = data[0];
          }
        } else {
          let params = {
            title: msg
          };
          this.$refs.toast && this.$refs.toast.show(params);
        }
      } else {
        let params = {
          title: "请输入梦境"
        };
        this.$refs.toast && this.$refs.toast.show(params);
      }
    },
    change(e) {
      this.card = e.item;
    }
  }
};
</script>


<style lang="scss">
.zgjm-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: #f5f6f7;
  position: relative;
  overflow: hidden;
  .my-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .top {
    position: relative;
    z-index: 2;
  }
  .bottom {
    flex-grow: 1;
    padding: 10px 10px 10px 10px;

    display: flex;
    flex-direction: column;
    overflow: auto;
    .tul-card {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      overflow: auto;
    }
    .tui-card-header {
      display: none !important;
    }
    .tui-default {
      padding: 10px 0 10px 10px;
      overflow: auto;
    }
  }
}
</style>